<template>
  <div class="individualCenter">
    <a-row :gutter="20">
      <a-col :span="7">
        <a-card title="个人信息" class="individualCenter-info">
          <user-avatar :user="user"></user-avatar>

          <ul class="individualCenter-info-detail">
            <li v-for="(item, index) in infoList" :key="index">
              <a-row>
                <a-col :span="10">
                  <component :is="item.icon"></component>
                  <span>{{ item.name }}</span>
                </a-col>
                <a-col :span="14">
                  <div>{{ item.value }}</div>
                </a-col>
              </a-row>
            </li>
          </ul>
        </a-card>
      </a-col>
      <a-col :span="17">
        <a-card title="基本资料" class="individualCenter-resource">
          <a-tabs v-model="activeTab" @tab-click="tabClick">
            <a-tab-pane key="1" title="基本资料">
              <user-info :user="user"></user-info>
            </a-tab-pane>
            <a-tab-pane key="2" title="修改密码">
              <reset-psw :user="user"></reset-psw>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './individualCenter.ts';
import UserInfo from '@views/system/user/individualCenter/userInfo/userInfo.vue';
import ResetPsw from '@views/system/user/individualCenter/resetPsw/resetPsw.vue';
import UserAvatar from '@views/system/user/individualCenter/userAvatar/userAvatar.vue';

export default defineComponent({
  name: 'IndividualCenter',
  components: { UserInfo, ResetPsw, UserAvatar },
  setup() {
    const { base, infoList, user, init, tabClick } = importConfig();

    return {
      ...toRefs(base),
      infoList,
      user,
      init,
      tabClick,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.individualCenter {
  background-color: rgb(var(--gray-2));
  padding-top: 15px;

  &-info {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;

    //&-avatar{
    //  position: relative;
    //
    //  &:hover &-cover{
    //    display: block;
    //  }
    //
    //  &-cover{
    //    cursor: pointer;
    //    display: none;
    //    position: absolute;
    //    top: 0;
    //    left: calc(50% - 32px);
    //    width: 64px;
    //    height: 64px;
    //    border-radius: 50%;
    //    color: white;
    //    line-height: 64px;
    //    background-color: rgba(0,0,0,.5);
    //  }
    //}

    &-detail {
      list-style: none;
      padding: 0;

      li {
        border-bottom: 1px solid #eee;
        padding: 6px 0;
        text-align: left;
        margin-bottom: 10px;
      }
    }
  }

  &-resource {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
  }
}

:deep(.arco-modal-body) {
  overflow: hidden;
}
</style>
